<template>
  <div id="app">
    <div class="nax-box">
      <ul class="nav">
          <router-link to="/" tag="li" exact>home1</router-link>

          <!--<router-link to="/document"  event="mousemove">document</router-link>-->
          <router-link :to="{path:'/document'}" tag="li">document</router-link>

          <!--<li><router-link to="/about">about</router-link></li>-->

          <router-link to="/about" tag="li">about</router-link>

          <router-link to="/user" tag="li">user</router-link>

      </ul>
    </div>

    <!-- <transition name='left' mode="out-in"></transition> -->

     <input type="button" value="后退" @click='backHandle'>
     <input type="button" value="后退" @click='forwordHandle'>
     <input type="button" value="控制前进后退的步数" @click='goHandle'>
      <input type="button" value="跳转" @click='gotoHandle'>
    <router-view></router-view>

  </div>

</template>

<script>
import '@/assets/css/app.css'
export default {
  name: 'app',
  methods:{
    backHandle(){
      this.$router.back()
    },
    forwordHandle(){
      this.$router.forward()
    },
    goHandle(){
      this.$route.go(-1)
    },
    gotoHandle(){
      //this.$router.replace({path:'/'}) 替换栈记录
      this.$router.push({path:'/'})
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 2000px;

}
.nax-box{width: 100%; background: #6db7e2}
.router-link-active {
  background: #e0e0e0;
}
  .v-enter{  opacity: 0;  }
  .v-enter-to{  opacity: 1; }
  .v-enter-active{transition: 1s}

  .v-leave{  opacity: 1;  }
  .v-leave-to{  opacity: 0; }
  .v-leave-active{transition: 2s}

  .left-enter{ transform:translateX(100%) }
  .left-enter-to{  transform:translateX(0) }
  .left-enter-active{transition: 1s}

  .left-leave{ transform:translateX(0) }
  .left-leave-to{  transform:translateX(-100%) }
  .left-enter-active{transition: 1s}
</style>
